<!--
 * @Author: your name
 * @Date: 2021-07-18 17:12:05
 * @LastEditTime: 2022-02-13 16:44:24
 * @LastEditors: ke.xue
 * @Description: In User Settings Edit
 * @FilePath: \product-display\src\components\banner.vue
-->
<template>
  <div class="banner">
    <el-carousel :interval="4000" height="400px">
      <el-carousel-item v-for="(item, index) in banner" :key="index">
        <div class="bannerItemBox"><img :src="item" alt=""></div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { banner1, banner2, banner3, banner4, banner5, banner6, banner7 } from '@/assets/js/img.js'

export default {
  data () {
    return {
      banner: [ banner1, banner2, banner3, banner4, banner5, banner6, banner7 ],
      imgBaseUrl: process.env.VUE_APP_IMAGE_URL
    }
  },
  mounted () {},
  computed: {
    ...mapGetters([
      'bannerList'
    ])
  },
  methods: {
    toDetail (obj) {
      const id = this.$route.query.id
      if (id === obj.id) return
      this.$router.push({
        path: '/show/detail',
        query: obj
      })
    }
  }
}
</script>

<style lang="less" scoped>
.banner {
  min-width: 1200px;
  margin: 0 auto;
}
.bannerItemBox {
  position: relative;
  height: 400px;
  text-align: center;
  overflow: hidden;
  font-size: 0;
  img {
    position: absolute;
    top: 0;left: 50%;
    margin-left: -960px;
    width: 1920px;
    height: 400px;
    min-width: 1920px;
    min-height: 400px;
  }
}
</style>
